Layout佈局設計
一、佈局設計原則 Layout Principles
1. 群組相關內容
- 利用留白、背景形狀、顏色、材質或分隔線，區分內容板塊。
- 確保控制元件與內容明確分離，保持介面清晰。
2. 強調重要資訊
- 給予關鍵資訊足夠的空間，避免被次要資訊遮擋。
- 次要內容可放入額外檢視或介面其他位置。
3. 擴充套件內容填滿螢幕
- 全屏背景或影象需延展至螢幕邊緣。
- 滾動佈局應覆蓋至螢幕底部與邊緣。
- 控制元件（如側邊欄、標籤欄）浮於內容之上，佈局需預留其位置。
4. 非全屏內容需填補背景
- 使用
backgroundExtensionEffect()或UIBackgroundExtensionView新增背景延伸區域。
二、視覺層級與可讀性 Visual Hierarchy
1. 區分控制元件與內容
- 使用 Liquid Glass 材質，統一按鈕、工具欄外觀。
- 滾動邊緣過渡建議使用：
- Soft edge：適用於 iOS、iPadOS。
- Hard edge：適用於 macOS，如固定表頭等需要強邊界的控制元件。
2. 符合閱讀順序
- 重要元素應放在檢視頂部和前導側（LTR 語言為左側）。
- 注意支援 RTL（從右至左）語言。
3. 對齊與層級表達
- 元素對齊有助於快速瀏覽，提升內容組織感。
- 使用縮排和對齊，表達資訊層級結構。
4. 漸進式披露（Progressive Disclosure）
- 大量內容無法一次展示時，應提示更多項可滑動或點開檢視更多。
5. 控制元件間距與邏輯分組
- 控制元件之間保持適當距離，避免誤操作。
三、適應性設計 Adaptability
1. 支援裝置與系統變更
- 響應不同螢幕尺寸、方向、色域。
- 支援系統特性：Dynamic Island、外接螢幕、視窗調整、Dynamic Type、國際化佈局（RTL）、字型變化等。
2. 使用 Safe Area 和 Layout Guides
- 安全區域（Safe Area）：避免遮擋攝像頭、感測器區域。
- 佈局引導（Layout Guide）：用作內容對齊與限制文字寬度。
四、平臺特定建議 Platform-Specific Guidance
iOS
- 建議支援豎屏與橫屏，橫屏應相容左右旋轉。
- 避免全寬按鈕，遵循系統邊距。
- 可隱藏狀態列，僅用於沉浸式體驗如遊戲或影片。
iPadOS
- 視窗可縮放，需適配最小寬度與系統劃分檢視（半屏、1/3 等）。
- 避免快速切換佈局，如 Split View 建議優先隱藏第三級檢視。
- 採用可切換側邊欄/標籤欄（Convertible Tab Bar）實現自適應導航。
macOS
- 避免將重要控制元件放在視窗底部（易被遮擋）。
- 避免內容侵入頂部攝像頭區域。
tvOS
- 設計需相容不同尺寸電視。
- 主內容需內縮安全區：上下邊緣 60pt，左右邊緣 80pt，防止舊電視 overscan。
- 聚焦元素需有足夠間距，避免放大後遮擋其他內容。
- 支援多列網格（2~9列），需一致間距，保持對稱。
visionOS
- 內容可沿 Z 軸延展，避免內容超出系統視窗控制區域。
- 核心控制元件居中放置，提升可見性。
- 如需額外控制元件，可使用 Ornaments 懸掛式元件。
- 按鈕間需保留至少 60pt 間距，方便視覺定位。
watchOS
- 內容應延展至螢幕邊緣，減少元素間邊距。
- 橫向按鈕不宜超 2~3 個，避免介面擁擠。
- 特殊場景（如展示二維碼）支援自動旋轉。
五、裝置與尺寸規格 Device Specifications
iOS / iPadOS
- 全面列出當前與過往型號的尺寸（單位 pt 與 px）。
- 不同裝置下的 Size Class：
- iPhone：豎屏為 Compact Width，Regular Height；橫屏為 Regular Width，Compact Height（視型號不同略有差異）。
- iPad：通常為 Regular Width & Height。
watchOS
- 螢幕尺寸從 272x340px 到 416x496px 不等。
- 自動縮放支援，推薦基於中等尺寸設計，再向上/下相容。